<template>
  <div class="mdui-card">

    <!-- 卡片头部，包含头像、标题、副标题 -->
    <div v-if="avatar || title || subtitle" class="mdui-card-header">
      <img v-if="avatar" class="mdui-card-header-avatar" :src="avatar" />
      <div v-if="title" class="mdui-card-header-title">{{title}}</div>
      <div v-if="subtitle" class="mdui-card-header-subtitle">{{subtitle}}</div>
    </div>

    <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
    <div v-if="media" class="mdui-card-media">
      <image class="img" lazy-load :src="media" mode="aspectFit" />

      <!-- 卡片中可以包含一个或多个菜单按钮 -->
      <div v-if="menuActions && menuActions.length > 0" class="mdui-card-menu">
        <button v-for="(item, index) in menuActions" :class="['icon-button ' + item.icon]" :key="index" size="mini" @click="item.handleClick">
        </button>
      </div>

      <div class="mdui-card-media-covered">
        <!-- 卡片的标题和副标题 -->
        <div v-if="primaryTitle || primarySubtitle" class="mdui-card-primary">
          <div v-if="primaryTitle" class="mdui-card-primary-title">{{primaryTitle}}</div>
          <div v-if="primarySubtitle" class="mdui-card-primary-subtitle">{{primarySubtitle}}</div>
        </div>
      </div>
    </div>

    <!-- 卡片的内容 -->
    <div v-if="content" class="mdui-card-content">
      {{ content }}
    </div>

    <!-- 卡片的按钮 -->
    <div v-if="rightAction || (actions && actions.length > 0)" class="mdui-card-actions">
      <button class="card-actions" v-for="(item, index) in actions" :key="index" size="mini" @click="item.handleClick">
        {{item.title}}
      </button>
      <button v-if="rightAction" size="mini" @click="rightAction.handleClick">
        <div>111</div>
      </button>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    title: String,
    subtitle: String,
    avatar: String,
    media: String,
    primaryTitle: String,
    primarySubtitle: String,
    content: String,
    menuActions: Array,
    actions: Array,
    rightAction: Object
  }
}
</script>

<style>
.card-actions {
  margin-left: 8px;
}
.img {
  width: 100%;
  height: 180px;
}
.icon-button {
  width: 48px;
  height: 48px;
  /* background: none; */
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-button::after {
  border: none;
  border-radius: 48px;
}
/**
 * =============================================================================
 * ************   Card 卡片   ************
 * =============================================================================
 */
/* 卡片 */
.mdui-card {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  color: #000;
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
/**
 * ===================== 头部，包含头像、标题、副标题
 */
.mdui-card-header {
  position: relative;
  height: 72px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 16px;
}
/* 卡片头部头像 */
.mdui-card-header-avatar {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
/* 卡片头部标题 */
.mdui-card-header-title {
  display: block;
  margin-left: 52px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.87;
}
/* 卡片头部副标题 */
.mdui-card-header-subtitle {
  display: block;
  margin-left: 52px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.54;
}
/**
 * =========================== 主标题区域
 */
.mdui-card-primary {
  position: relative;
  padding: 24px 16px 16px 16px;
}
/* 主标题区域标题 */
.mdui-card-primary-title {
  display: block;
  font-size: 24px;
  line-height: 36px;
  opacity: 0.87;
}
/* 主标题区域副标题 */
.mdui-card-primary-subtitle {
  display: block;
  font-size: 14px;
  line-height: 24px;
  opacity: 0.54;
}
/**
 * ============================ 内容区域
 */
.mdui-card-content {
  position: relative;
  padding: 16px;
  font-size: 14px;
  line-height: 24px;
}
/**
 * ============================ 卡片菜单
 */
.mdui-card-menu {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
}
.mdui-card-menu .mdui-btn {
  margin-left: 8px;
}
/**
 * =========================== 按钮区域
 */
.mdui-card-actions {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px;
}
.mdui-card-actions:before,
.mdui-card-actions:after {
  display: table;
  content: ' ';
}
.mdui-card-actions:after {
  clear: both;
}
.mdui-card-actions:before,
.mdui-card-actions:after {
  display: table;
  content: ' ';
}
.mdui-card-actions:after {
  clear: both;
}
.mdui-card-actions .mdui-btn {
  max-width: 100%;
  margin: 0 8px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdui-card-actions .mdui-btn-icon {
  width: 36px;
  height: 36px;
  margin: 0 8px;
}
/* 使按钮竖向排列 */
.mdui-card-actions-stacked .mdui-btn {
  display: block;
  margin: 0 0 4px 0;
}
.mdui-card-actions-stacked .mdui-btn:last-child {
  margin: 0;
}
/**
 * ============================= 媒体元素区域
 */
.mdui-card-media {
  position: relative;
}
.mdui-card-media img,
.mdui-card-media video {
  display: block;
  width: 100%;
}
/* 覆盖在媒体元素上的内容 */
.mdui-card-media-covered {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  /* 覆盖在媒体元素上的标题 */
}
.mdui-card-media-covered .mdui-card-primary-title {
  opacity: 1;
}
.mdui-card-media-covered .mdui-card-primary-subtitle {
  opacity: 0.7;
}
/* 覆盖在媒体元素顶部 */
.mdui-card-media-covered-top {
  top: 0;
  bottom: auto;
}
/* 覆盖层透明 */
.mdui-card-media-covered-transparent {
  background: transparent;
}
/* 覆盖层渐变 */
.mdui-card-media-covered-gradient {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.26)),
    to(rgba(0, 0, 0, 0))
  );
  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
}
.mdui-card-media-covered-gradient.mdui-card-media-covered-top {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0.26)),
    to(rgba(0, 0, 0, 0))
  );
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
}
/**
 * =============================================================================
 * ************   Card dark   ************
 * =============================================================================
 */
.mdui-theme-layout-dark .mdui-card {
  color: #fff;
  background-color: #424242;
}
</style>
